<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<base href="${pageContext.request.contextPath}/">
<meta name="renderer" content="webkit">
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<title>HPELearn</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/global.css">
<style type="text/css">
.panel-info .panel-heading {
	background-color: #5bc0de;
	color: white;
	font-size: 15px;
	border-color: #5bc0de;
}

.form-control,.control {
	display: inline-table;
	max-width: 300px;
	width: 50%;
	min-width: 150px;
}

.form-group span {
	color: red;
}

.clear {
	display: inline-block;
}

label {
	display: inline-block;
	width: 60px;
	text-align: right;
}

.check input[type=checkbox] {
	margin-left: 5px;
}

#userCode {
	height: 34px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	padding: 6px 12px;
}
#userCode:FOCUS {
	border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
</style>
</head>
<body>

	<jsp:include page="head.jsp"></jsp:include>

	<div style="margin-top: 82px;"></div>
	<!-- 因为导航栏采用了fix定位，导致其脱离文档流，
		所以用了一个上边距为82px的div填补导航栏本来应该占据的位置
	 -->

	<br />
	<div class="container">
		<div class="col-lg-9 col-md-10 col-sm-11"
			style="margin: 0 auto;float:none;">
			<div class="panel panel-info">
				<div class="panel-heading">用户注册</div>
				<div class="panel-body">
					<form action="#" method="post">
						<div class="form-group">
							<div class="clear col-lg-3 col-md-3 col-sm-2 col-xs-2"></div>
							<label for="userEmail">邮箱:</label> <input type="text"
								class="form-control" id="userEmail" name="userEmail"
								placeholder="邮箱/Email"> <span id="userEmail-info">*</span>
						</div>

						<div class="form-group">
							<div class="clear col-lg-3 col-md-3 col-sm-2 col-xs-2"></div>
							<label for="userName">昵称:</label> <input type="text"
								class="form-control" id="userName" name="userName"
								placeholder="昵称/Name"> <span id="userEmail-info">*</span>
						</div>

						<div class="form-group">
							<div class="clear col-lg-3 col-md-3 col-sm-2 col-xs-2"></div>
							<label for="userPwd">密码:</label> <input type="password"
								class="form-control" id="userPwd" name="userPwd"
								placeholder="密码/PassWord"> <span id="userPwd-info">*</span>
						</div>

						<div class="form-group">
							<div class="clear col-lg-3 col-md-3 col-sm-2 col-xs-2"></div>
							<label for="C_userPwd">确认密码:</label> <input type="password"
								class="form-control" id="C_userPwd" name="C_userPwd"
								placeholder="确认密码/Confirm PassWord"> <span
								id="C_userPwd-info">*</span>
						</div>

						<div class="form-group">
							<div class="clear col-lg-3 col-md-3 col-sm-2 col-xs-2"></div>
							<label for="userAge">年龄:</label> <input type="text"
								class="form-control" id="userAge" name="userAge"
								placeholder="年龄/Age"> <span id="userAge-info"></span>
						</div>

						<div class="form-group">
							<div class="clear col-lg-3 col-md-3 col-sm-2 col-xs-2"></div>
							<label for="userSex">性别:</label> <select class="form-control"
								id="userSex" name="userSex">
								<option value="">---请选择---</option>
								<option value="男">男</option>
								<option value="女">女</option>
							</select> <span id="userSex-info"></span>
						</div>
						<div class="form-group">
							<div class="clear col-lg-3 col-md-3 col-sm-2 col-xs-2"></div>
							<label for="datacomments">关注类别:</label>
							<div id="datacomments" class="control">
								<label class="checkbox-inline"> <input type="checkbox"
									name="datacomments" value="Java">Java
								</label> <label class="checkbox-inline"> <input type="checkbox"
									name="datacomments" value=".Net">.Net
								</label> <label class="checkbox-inline"> <input type="checkbox"
									name="datacomments" value="Android">Android
								</label> <label class="checkbox-inline"> <input type="checkbox"
									name="datacomments" value="测试">测试
								</label> <label class="checkbox-inline"> <input type="checkbox"
									name="datacomments" value="前端">前端
								</label>
							</div>
							<span id="datacomments-info"></span>
						</div>

						<div class="form-group">
							<div class="clear col-lg-3 col-md-3 col-sm-2 col-xs-2"></div>
							<label for="userCode">验证码:</label>
							<div class="control">
								<input type="text" id="userCode" name="userCode"
									placeholder="验证码/Code">
									&nbsp;&nbsp;&nbsp;&nbsp;
								<button class="btn btn-info">发送验证码</button>
							</div>
							<span id="userCode-info">*</span>
						</div>

						<div class="text-center">
							<button class="btn btn-info" type="submit">
								<span class="glyphicon glyphicon-edit"></span>&nbsp;&nbsp;&nbsp;&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册
							</button>
							<button class="btn btn-danger" type="reset">
								<span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;&nbsp;&nbsp;重&nbsp;&nbsp;&nbsp;&nbsp;置
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>


	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/zh_CN.min.js"></script>
</html>
